<template>
    <div class="newsinfo-container">
        <h3 class="title">{{ newsinfo.title }}</h3>
        <p class="subtitle">
            <span>发表时间: {{ newsinfo.created_at }}</span>
            <span>点击: {{ newsinfo.views_count }}</span>
        </p>

        <hr>

        <div class="content" v-html="newsinfo.content">
        </div>

         <comment-box></comment-box> 
    </div>
</template>

<script>
import { Toast } from 'mint-ui'

import comment from '../subcomponents/comment.vue'

export default {
   data(){
       return { //将url地址中传递的id值挂载到data()上
           id: this.$route.params.id,
           newsinfo: {}
       }
   },
   created() {
       this.getNewsInfo()
   },
   methods: {
       getNewsInfo() { //获取新闻详情
          
            let _this = this
            _this.$axios.get('https://unidemo.dcloud.net.cn/api/news/36kr/' + _this.id)
            .then(function (response) {
            console.log(response.data)
            _this.newsinfo = response.data
            })
            .catch(function (err) {
             Toast(err)
            })

        }
   },
   components:{ //注册子组件
       "comment-box": comment
   } 
}
</script>

<style lang="scss" scoped>

.newsinfo-container{

    padding: 0 4px;
    .title{
         font-size: 16px;
         text-align: center;
         margin: 15px 0;
         color: red;
    }
    .subtitle{
         font-size: 13px;
         color: #226aff;
         display: flex;
         justify-content: space-between;
    }
    .content{

    }
}
</style>